{% extends '../_manage.html' %}

{% block title %} {{ _('All Articles') }} {% endblock %}

{% block head %}
<script>

    $(function () {
        getJSON('/api/categories', function (err, resp) {
            if (err) {
                return showError(err);
            }
            var categories = resp.results.reduce((obj, cat)=>{
            	obj[cat.id] = cat;
            	return obj;
            }, {});
            getJSON('/api/articles', {
                page: '{{ page }}'
            }, function (err, resp) {
                if (err) {
                    return showError(err);
                }
                var page = resp.page;
                var articles = resp.results;
                var userIds = articles.map(a => a.userId).filter(function (element, index, self) {
    				return self.indexOf(element) === index;
				});
                getJSON('/api/users/ids?' + userIds.map(id=>'id='+id).join('&'), function (err, resp) {
                	if (err) {
                		return showError(err);
                	}
	                articles.map(a => {
	                	a.user = resp[a.userId];
			        	a.category = categories[a.categoryId];
        				a.tags = a.tags ? a.tags.split(',') : [];
		    	    });
                	initVM({
                		page: page,
                    	articles: articles
                	});
                });
            });
        });
    });

    function initVM(data) {
        var vm = new Vue({
            el: '#vm',
            data: {
            	page: data.page,
                articles: data.articles
            },
            created: function () {
                $('#loading').hide();
                $('#vm').show();
            },
            methods: {
                editArticle: function (id) {
                    location.assign('article_update?id=' + id);
                },
                deleteArticle: function (id) {
                    var that = this;
                    var a = that.articles.find(a => a.id === id);
                    UIkit.modal.confirm('Article \"' + a.name + '\" will be deleted. Continue?', function () {
                        that.$resource('/api/articles/' + a.id + '/delete').save({}).then(function (resp) {
                            resp.json().then(function (result) {
                                refresh();
                            });
                        }, onJsonError);
                    });
                },
            }
        });
    }
</script>
{% endblock %}

{% block main %}

<div id="loading" class="uk-width-1-1">
    <i class="uk-icon-spinner uk-icon-spin"></i> {{ _('Loading') }}...
</div>

<div id="error" class="uk-width-1-1">
</div>

<div id="vm" class="uk-width-1-1">
    <ul data-uk-tab class="uk-tab">
        <li class="uk-active"><a href="#0">{{ _('Articles') }}</a></li>
        <li><a href="#0" onclick="location.assign('category_list')">{{ _('Categories') }}</a></li>
    </ul>
    <div class="uk-margin">
        <a href="javascript:refresh()" class="uk-button"><i class="uk-icon-refresh"></i> {{ _('Refresh') }}</a>
        <a href="article_create" class="uk-button uk-button-primary uk-float-right"><i class="uk-icon-plus"></i>
            {{ _('New Article') }}</a>
    </div>

    <table class="uk-table uk-table-hover">
        <thead>
            <tr>
                <th width="20%">{{ _('Image') }}</th>
                <th width="40%">{{ _('Name') }}</th>
                <th width="15%">{{ _('Category') }} / {{ _('Author') }}</th>
                <th width="15%">{{ _('Publish At') }} / {{ _('Created At') }}</th>
                <th width="10%">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="a in articles">
                <td>
                    <img :src="'/files/attachments/' + a.imageId + '/s'" />
                </td>
                <td>
                    <p><a v-text="a.name" :href="'/article/' + a.id" target="_blank"></a></p>
                    <p v-text="a.description"></p>
                    <p><span v-for="t in a.tags" style="padding-right:1em;"><i class="uk-icon-tag"></i> <span v-text="t"></span></span></p>
                </td>
                <td>
                    <p><i class="uk-icon-list"></i> <a :href="'/category/' + a.categoryId" v-text="a.category.name" target="_blank"></a></p>
                    <p><i class="uk-icon-user"></i> <a :href="'/user/' + a.userId" v-text="a.user.name" target="_blank"></a></p>
                </td>
                <td>
                    <p><span v-text="a.publishAt.toDateTime()"></span></p>
                    <p><span v-text="a.createdAt.toDateTime()"></span></p>
                </td>
                <td>
                    <a v-on:click="editArticle(a.id)" title="Edit Article" href="#0" class="x-btn"><i class="uk-icon-edit"></i></a>
                    <a v-on:click="deleteArticle(a.id)" title="Delete Article" href="#0" class="x-btn"><i class="uk-icon-trash"></i></a>
                </td>
            </tr>
        </tbody>
    </table>

    <div is="pagination" v-bind:page="page"></div>

</div>

{% endblock %}